<template>
  <div id="staff">
    <div class="header">
      <div class="search_layout">
        <el-input v-model="query" placeholder="请输入手机号或姓名进行搜索" style="width: 300px;margin-left: 20px"></el-input>
        <el-button type="primary" round style="height: 40px;margin-left: 20px" @click="getList">搜索</el-button>
      </div>
      <el-button type="primary" round style="height: 40px;margin-left: 20px;margin-right: 20px" @click="clickAdd">新增
      </el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="电话">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 20px;">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="600px">
      <div class="info_border">
        <div class="item">
          <div class="item_title">员工名：</div>
          <el-input
            placeholder="请输入员工名称"
            v-model="form.name"
            clearable class="input">
          </el-input>
        </div>
        <div class="item">
          <div class="item_title">手机号：</div>
          <el-input
            placeholder="请输入员工手机号"
            v-model="form.phone"
            clearable class="input">
          </el-input>
        </div>
        <div class="item">
          <div class="item_title">密码：</div>
          <el-input
            placeholder="请输入设置登录密码"
            v-model="form.password"
            clearable class="input">
          </el-input>
        </div>
        <div class="item">
          <div class="item_title">性别：</div>
          <el-radio-group v-model="form.gender" class="input">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </div>
        <div class="item">
          <div class="item_title">地址：</div>
          <el-input
            placeholder="请输入员工居住地址"
            v-model="form.address"
            clearable class="input">
          </el-input>
        </div>
        <el-button type="primary" @click="insertOrUpdate" style="width: 100%;">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Staff",
  data() {
    return {
      dialogTitle: "新增",
      dialogVisible: false,
      form: {
        id: null,
        name: "",
        phone: "",
        password: "",
        gender: 1,
        address: ""
      },
      page: 1,
      pageSize: 10,
      total: 0,
      query: "",
      tableData: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleCurrentChange(page) {
      this.page = page
      this.getList()
    },
    clickAdd() {
      this.dialogTitle = "新增员工"
      this.form = {
        id: null,
        name: "",
        phone: "",
        password: "",
        gender: 1,
        address: ""
      }
      this.dialogVisible = true
    },
    handleEdit(index, row) {
      this.dialogTitle = "修改员工信息"
      this.form = JSON.parse(JSON.stringify(this.tableData[index]))
      this.dialogVisible = true
    },
    handleDelete(index, row) {
      console.log(index, row);
      let data = {
        id: this.tableData[index].id
      }
      let that = this
      this.$http.post("/admin/staff/del", data).then(function (data) {
        if (data.code === 0) {
          that.$message({
            message: '刪除成功',
            type: 'success'
          });
          that.getList()
        } else {
          that.$message({
            message: '删除失败：' + data.msg,
            type: 'warning'
          });
        }
      })
    },
    getList() {
      let that = this
      this.$http.get("/admin/staff/list?pageSize=" + this.pageSize + "&page="
        + this.page + "&query=" + this.query)
        .then(function (data) {
          if (data.code === 0) {
            that.total = data.data.count
            that.tableData = data.data.list
          } else {
            that.$message({
              message: '刪除失败：' + data.msg,
              type: 'warning'
            });
          }
        })
    },
    insertOrUpdate() {
      let that = this
      this.$http.post("/admin/staff/add", this.form).then(function (data) {
        if (data.code === 0) {
          that.dialogVisible = false
          if (that.form.id == null) {
            that.$message({
              message: '添加成功',
              type: 'success'
            });
          } else {
            that.$message({
              message: '修改成功',
              type: 'success'
            });
          }
        } else {
          if (that.form.id == null) {
            that.$message({
              message: '添加失败：' + data.msg,
              type: 'warning'
            });
          } else {
            that.$message({
              message: '修改失败：' + data.msg,
              type: 'warning'
            });
          }
        }
        that.getList()
      })
    }
  }
}
</script>

<style scoped>
.input {
  flex: 1;
}

.info_border {
  width: 100%;
  height: 100%;
}

.item_title {
  width: 80px;
  font-size: 16px;
  color: black;
}

.item {
  width: 100%;
  height: auto;
  display: flex;
  flex-flow: row;
  align-items: center;
  margin-bottom: 20px;
}

.search_layout {
  width: auto;
  height: auto;
}

.header {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f0f0f0;
}

#staff {
  width: 100%;
  height: 100%;
}
</style>
